<template>
  <el-aside class="layout-aside" :width="menuWidth">
    <logo v-if="showLogo" />
    <menu-vertical />
  </el-aside>
</template>

<script setup>
import { computed } from 'vue'
import Logo from './logo.vue'
import MenuVertical from './menus/menu-vertical.vue'
import { useAppStore } from '@/stores/app'

defineOptions({
  name: 'LayoutAside'
})

const appStore = useAppStore()

const menuWidth = computed(() => {
  return appStore.sidebar.opened ? '220px' : '64px'
})

const showLogo = computed(() => {
  return appStore.settings.showLogo
})
</script>

<style scoped lang="scss">
.layout-aside {
  background: var(--ba-bg-color-overlay);
  margin: 16px 0 16px 16px;
  height: calc(100vh - 32px);
  box-shadow: var(--el-box-shadow-light);
  border-radius: var(--el-border-radius-base);
  overflow: hidden;
  transition: width 0.3s;
  
  &.mobile {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
  }
}
</style>
